<template>
    <div class="ping-select-wrapper" :class="classes">
        <div @click="isVisible = !isVisible" class="selected-item">
            <span>{{ selectedItem.roleName }}</span>
        </div>
        <div v-if="isVisible" class="dropdown-popover">
            <input v-model="searchKey" type="text" />
            <div class="options">
                <ul>
                    <li 
                        @click="changeSelectedItem(option)"
                        v-for="(option, index) in options" 
                        :key="index"
                    >
                        {{option.roleName}}
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
const props = {
    theme: {
        type: String,
        default: 'default',
        required: false
    },
    label: {
        type: String,
        default: 'label',
        required: false
    },
    value: {
        type: String,
        default: 'value',
        required: false
    },
    dashed: {
        type: Boolean,
        default: false,
        required: false
    },
    size: {
        type: String,
        default: "default",
        required: false
    },
    round: {
        type: Boolean,
        default: false,
        required: false
    },
    disabled: {
        type: Boolean,
        default: false,
        required: false
    },
    loading: {
        type: Boolean,
        default: false,
        required: false
    },
};

export default {
    name: 'ping-select',
    props,
    data(){
        return{
            selectedItem: {},
            isVisible: false,
            searchKey: "",
            options: [],
        }
    },
    computed: {
        classes() {
            const { theme, dashed, size, round, disabled } = this.props || props;
            return {
                [`ping-theme-${theme}`]: theme,
                [`ping-theme-dashed`]: dashed,
                [`ping-size-${size}`]: size,
                [`is-round`]: round,
                [`is-disabled`]: disabled,
            };
        }
    },
    created(){
        this.queryOptions();
    },
    methods: {
        queryOptions(){
            fetch('https://api.boot.jeecg.com/sys/role/queryall?_t=1650344969')
                .then(response => response.json())
                .then(response => {
                    const { success, code, result } = response;
                    if(success){
                        this.options = result;
                    }
                    console.log(response)
                });
        },

        changeSelectedItem(option){
            this.selectedItem = option;
        },
    }
}
</script>


<style lang="scss" scoped>

.ping-select-wrapper{
    max-widht: 350px;
    posotion: relative;
    margin: 0 auto;
    
    .selected-item{
        height: 40px;
        border: 2px solid lightgray;
        border-radius: 5px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 18px;
        font-weight: 400;
    }
    .dropdown-popover{
        posotion: absolute;
        border: 2px solid lightgray;
        top: 46px;
        left: 0;
        right: 0;
        background-color: #fff;
        max-width: 100%;
        padding: 10px;
        input{
            widht: 90%;
            height: 30px;
            border: 2px solid lightgray;
            font-size: 16px;
            padding-left: 8px;
        }

        .options{
            widht: 100%;

            ul {
                list-style: none;
                text-align: left;
                padding-left: 8px;
                max-height: 200px;
                overflow-y: scroll;
                overflow-x: hidden;

                li{
                    widht: 200%;
                    border-bottom: 1px solid lightgray;
                    padding: 10px;
                    background-color: #f1f1f1;
                    cursor: pointer;
                    fonst-size: 16px;

                    
                }
            }
        }
    }
}

</style>